<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>accordion demo </title>
<link type="text/css" rel="stylesheet"  href="../highlight/shCore.css"/>
<link type="text/css" rel="stylesheet" href="../style/avalon.doc.css"/>
<script src="../highlight/shCore.js"></script>
<script src="../avalon.js"></script>
</head>
<body>
    <div class="wrapper">
        <h1>accordion demo1</h1>

        <div class="demo-show" ms-controller="demo">
            <div ms-widget="accordion,aa,$aaOpts">
            </div>
            <script>
                require(["accordion/avalon.accordion"], function($$) {
                    $$.define('demo',function(vm){
                        vm.$aaOpts = {
                            data: [{
                                'title': '标题1',
                                'content': '正文1<p>fasdfsdaf</p>'
                            }, {
                                'title': '标题2',
                                'content': '正文2'
                            }],
                            accordionClass: "oni-accordion-customClass",
                            initIndex: 1,
                            width: "500",
                            onBeforeSwitch: function() {
                                avalon.log(this);
                                avalon.log(arguments);
                                avalon.log("onBeforeSwitch callback");
                            },
                            onSwitch: function() {
                                avalon.log("onSwitch callback");
                            },
                            multiple: true
                        }
                    });
                    $$.scan();
                });
            </script>
        </div>

        <p class="example">accordion组件的定义必须同时设置组件名、组件ID、组件配置项，比如：ms-widget="accordion, accordionId, accordionOpts",并且配置项最好以"$"开头，表示不被avalon扫描监控</p>
        <p><span class="use-description">说明：</span>accordion组件默认全部关闭面板，下面实例设置initIndex为1表示初始打开第二个面板；accordion组件默认不可同时打开多个面板或者关闭全部面板，这里设置multiple为true，使得组件可以同时打开多个面板，也可以关闭全部面板；可以为accordion设置自己想要的class，通过accordionClass配置;accordion组件默认宽度是"100%",下面的demo配置组件宽度为500px;在打开一个面板之前可以添加打开前的回调beforeSwtich，同样可以定义打开之后的回调onSwitch</p>
        <div ms-skip>
            <pre class="brush: js; html-script: true; gutter: false; toolbar: false">
                &lt;!DOCTYPE HTML&gt;
                &lt;html&gt;
                &lt;head&gt;
                    &lt;meta charset='utf-8'/&gt;
                    &lt;title&gt;accordion demo 1&lt;/title&gt;
                    &lt;script src='avalon.js'&gt;&lt;/script&gt;
                &lt;/head&gt;
                &lt;body&gt;
                    &lt;div class="demo-show" ms-controller="demo"&gt;
                        &lt;div ms-widget="accordion,aa,$aaOpts"&gt;
                        &lt;/div&gt;
                        &lt;script&gt; 
                            require(["accordion/avalon.accordion"], function($$) {
                                $$.define('demo',function(vm){
                                    vm.$aaOpts = {
                                        data: [{
                                            'title': '标题1',
                                            'content': '正文1&lt;p&gt;fasdfsdaf&lt;/p&gt;'
                                        }, {
                                            'title': '标题2',
                                            'content': '正文2'
                                        }],
                                        accordionClass: "oni-accordion-customClass",
                                        initIndex: 1,
                                        width: "500",
                                        onBeforeSwitch: function() {
                                            avalon.log(this);
                                            avalon.log(arguments);
                                            avalon.log("onBeforeSwitch callback");
                                        },
                                        onSwitch: function() {
                                            avalon.log("onSwitch callback");
                                        },
                                        multiple: true
                                    }
                                });
                                $$.scan();
                            });
                        &lt;/script&gt;
                    &lt;/div&gt;
                &lt;/body&gt;
                &lt;/html&gt;
            </pre>
        </div>

    </div>
</body>
</html>

